<template>
	<view>
		<u-navbar title-color="#fff" back-icon-color="#ffffff" :background="background" :back-text-style="{ color: '#fff' }">
			<view class="slot-wrap">
				<view class="search-wrap">
					<u-search v-model="key" placeholder="巡检内容" height="56" @search="search" @custom="search" :action-style="{ color: '#fff' }"></u-search>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<u-cell-group>
				<view v-for="(item, index) in list" :key="index">
					<u-cell-item :title="item.subject.substring(0, 16)" :label="item.answer.substring(0, 16)" @click="goTo(item.id)" :arrow="false"><u-tag :text="getTyp(item.labelId)" /></u-cell-item>
					<u-line></u-line>
				</view>
			</u-cell-group>
		</view>
		<u-gap height="20"></u-gap>
		<u-loadmore :status="status" @loadmore="loadmore" />
		<u-gap height="20"></u-gap>
		<template v-if="visible">
			<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" :popMenu="false" @fabClick="add"></uni-fab>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 按钮显示
			visible: true,
			// 加号样式
			pattern: {
				buttonColor: '#409EFF'
			},
			page: 1,
			status: 'loadmore',
			background: {
				'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
			},
			key: '',
			list: [],
			type: []
		};
	},
	onLoad(option) {
		this.request({
			url: 'BaseLabel/pages',
			data: {
				limit: 0
			},
			success: res => {
				this.type = res.data;
			}
		});
	},
	onShow() {
		this.search();
	},
	methods: {
		getTyp(id) {
			let typ = this.type.find(m => m.value == id);
			if (typ != undefined) {
				return typ.label;
			} else {
				return '';
			}
		},
		add() {
			uni.navigateTo({
				url: 'add'
			});
		},
		goTo(id) {
			uni.navigateTo({
				url: 'detail?id=' + id
			});
		},
		search() {
			this.page = 1;
			this.request({
				url: 'EamItem/pages',
				data: {
					key: this.key,
					limit: 10
				},
				success: res => {
					this.list = res.data;
					if (res.data.length < 10) {
						this.status = 'nomore';
					}
				}
			});
		},
		loadmore() {
			this.request({
				url: 'EamItem/pages',
				data: {
					page: ++this.page,
					limit: 10,
					key: this.key
				},
				success: res => {
					if (res.data.length < 10) {
						this.status = 'nomore';
					}
					if (res.data.length == 0) {
						return this.$u.toast('已无更多数据！');
					} else {
						this.list = this.list.concat(res.data);
					}
				}
			});
		}
	}
};
</script>

<style>
.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}
.navbar-right {
	margin-right: 24rpx;
	display: flex;
}
.right-item {
	position: relative;
	color: #ffffff;
	display: flex;
}
</style>
